<!--
 * @Author: Lizhenyu
 * @Date: 2021-08-04 15:08:28
 * @FilePath: \usp-osm-frondend\src\views\serviceCenter\equityMgmt\dialog\usageDialog.vue
-->
<template>
  <div>
    <el-dialog
      title="使用详情"
      append-to-body
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :wrapperClosable="false"
      destroy-on-close
      top="0"
      width="60%"
    >
      <div class="serviceInfo">
        <el-row :gutter="20">
          <el-col :span="10" :offset="1">
            <span>服务名称：{{useList.serviceName}}</span>
          </el-col>
          <el-col :span="10">
            <span>服务编号：{{useList.serviceCode}}</span>
          </el-col>
        </el-row>
      </div>
      <div>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column label="序号" min-width="55">
            <template slot-scope="scope">
              {{ scope.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column
            prop="businessNo"
            label="业务编号"
            min-width="120"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column
            prop="businessType"
            label="业务类型"
            min-width="80"
            :show-overflow-tooltip="true"
          >
          </el-table-column>

          <el-table-column
            prop="businessStore"
            label="服务门店"
            min-width="120"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column
            prop="settleAmount"
            label="结算金额"
            min-width="120"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              {{ getPoint(scope.row.settleAmount) }}
            </template>
          </el-table-column>
          <el-table-column
            prop="useTime"
            label="使用时间"
            min-width="160"
            :show-overflow-tooltip="true"
          >
          <template slot-scope="scope">
            {{ scope.row.useTime | timestampToChange('time') }}
          </template>
          </el-table-column>
          <el-table-column
            prop="couponNo"
            label="券码"
            min-width="120"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
        </el-table>
      </div>
      <div slot="footer" style="text-align: right">
        <el-button @click="close">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { common } from '@/mixins/common'
import { getUserDetail } from '@/api/service'
import { mapGetters } from 'vuex'
export default {
  name: 'usageDialog',
  mixins: [common],
  computed: {
    ...mapGetters(['lookupItems'])
  },
  data () {
    return {
      dialogVisible: false,
      useList: {},
      tableData: []
    }
  },
  methods: {
    open (e) {
      this.useList = e
      this.listLoading = true
      this.dialogVisible = true
      getUserDetail(e.id).then((res) => {
        this.listLoading = false
        if (res) {
          if (Number(res.code) === 1) {
            this.tableData = res.obj
          } else {
            this.$confirm(res.code, {
              confirmButtonText: '确定',
              showCancelButton: false
            })
          }
        }
      })
    },
    close () {
      this.dialogVisible = false
    }
  }
}
</script>

<style>
</style>
